<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="format-detection" content="telephone=no">
    <title>填写信息</title>
    <script> (function(designWidth, maxWidth) {
            var doc = document,
            win = window,
            docEl = doc.documentElement,
            remStyle = document.createElement("style"),
            tid;

            function refreshRem() {
                var width = docEl.getBoundingClientRect().width;
                maxWidth = maxWidth || 540;
                width>maxWidth && (width=maxWidth);
                var rem = width * 100 / designWidth;
                remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
            }

            if (docEl.firstElementChild) {
                docEl.firstElementChild.appendChild(remStyle);
            } else {
                var wrap = doc.createElement("div");
                wrap.appendChild(remStyle);
                doc.write(wrap.innerHTML);
                wrap = null;
            }
            //要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
            refreshRem();

            win.addEventListener("resize", function() {
                clearTimeout(tid); //防止执行两次
                tid = setTimeout(refreshRem, 300);
            }, false);

            win.addEventListener("pageshow", function(e) {
                if (e.persisted) { // 浏览器后退的时候重新计算
                    clearTimeout(tid);
                    tid = setTimeout(refreshRem, 300);
                }
            }, false);

            if (doc.readyState === "complete") {
                doc.body.style.fontSize = "16px";
            } else {
                doc.addEventListener("DOMContentLoaded", function(e) {
                    doc.body.style.fontSize = "16px";
                }, false);
            }
        })(750, 750);</script>
    <!--[if lt IE 9]>  
        <script src="http://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
        <script src="https://cdn.bootcss.com/respond.__PUBLIC__/js/1.4.2/respond.min.js"></script>    
    <![endif]-->
    <link rel="stylesheet" href="__PUBLIC__/css/YD_calendar.min.css">
    <style>
        *{margin:0;padding:0}
        body{font-family:PingFangSC-Medium, sans-serif;width:100%;}
        .title{font-size:0.36rem;color:#333333;padding-top:1rem;text-align: center;font-weight: 400;}
        .title_small{font-size:0.24rem;color:#666666;padding-top:0.4rem;text-align: center;}
        section{
            padding:0.2rem;
            margin-top:0.3rem;
        }
        
        .f_left{float:left;}
        .f_right{float:right;-webkit-tap-highlight-color: transparent;text-decoration: none;}
        
        .titel{text-align: center;font-size:0.32rem;color:#333333;padding-bottom: 0.2rem;}
        #xie_frm ul{border:1px solid #d8d8d8;list-style: none;border-radius: 10px;overflow: hidden;}
        #xie_frm ul li{border-bottom: 1px solid #d8d8d8;height:1.2rem;line-height: 1.2rem;overflow: hidden;}
        #xie_frm ul li:last-child{border:none;}
        .frm_left{font-size:0.28rem;color:#333333;padding:0 0.4rem 0 0.36rem;width:1.14rem;text-align: center;}

        #man{display: inline-block;font-size:0.32rem;margin-right:0.2rem;-webkit-tap-highlight-color: transparent;}
        #woman{display: inline-block;font-size:0.32rem;-webkit-tap-highlight-color: transparent;}
        .ico{
            width:0.32rem;
            height:0.32rem;
            border-radius: 50%;
            border:1px solid #c72928;
            display:inline-block;
            background-color:#ffffff;
            vertical-align:middle;
            margin-right:0.1rem;
            position: relative;
        }
        .sex::after{
            content: '';
            position: absolute;
            width: 0.2rem;
            height:0.2rem;
            background-color: #c72928;
            border-radius: 50%;
            top:0.06rem;
            left:0.06rem;
        }
        .frm_auto{padding-left:1.9rem; }
        .frm_auto input{width:100%;height:1.2rem;border:none;outline:none;display:block;font-size:0.28rem;color:#333333;-webkit-appearance: none;-webkit-tap-highlight-color: transparent;}
        .pg_btn{padding:0.4rem 1rem 0.4rem 1rem;text-align: center;}
        .pg_btn #xie_btn{
            display:block;
            height:1rem;
            line-height: 1rem;
            font-size:0.32rem;
            text-decoration: none;
            color:#ffffff;
            background:#F24545;
            border-radius:0.1rem;
            box-shadow:0 5px 0 #C73444;
            border:none;
            -webkit-tap-highlight-color:transparent;
        }
        .calendar label{
            width:1rem;
            height:0.8rem;
            border-radius:0.1rem;
            font-size:0.3rem;
            line-height: 0.8rem;
            display: inline-block;
            border:none;
            text-align: center;
        }
        .calendar .cld{display: none;}
        .calendar :nth-child(2){
            color:#F24545;
            margin-right:0.4rem;
            background:#ffffff;
            border: 1px solid #F24545;
        }
        .calendar :nth-child(4){
            color:#F24545;
            border:1px solid #F24545;
        }
        .calendar input:checked+label{
            background:#F24545;
            color:#ffffff;
        }

    </style>
</head>
<body>
    <h2 class="title">请输入你的八字信息</h2>
    <p class="title_small">方便为你推送你的每日运势分析</p>
    <section>
        <form method="" action="<!--{:U('Mrys/jieguoye','',false)}-->" id="xie_frm">
            <ul>
                <li>
                    <div class="frm_left f_left">姓名</div>
                    <div class="frm_auto"><input type="text" name="username"  value="<!--{$arrdata['username']}-->" placeholder="请输入您的姓名"/></div>
                </li>
                <li>
                    <div class="frm_left f_left">性别</div>
                    <div class="frm_auto">
                        <span id="man">
                            <span class="ico sex"></span>
                            <span>男</span>
                        </span>
                        <span id="woman">
                            <span class="ico"></span>
                            <span>女</span>
                        </span>
                        <input type="hidden" name="sex" id="Js_sex" value="1"/>
                    </div>
                </li>
                <li>
                    <div class="frm_left f_left">出生日期</div>
                    <div class="frm_auto">
                        <input type="text" id="datetime" data-date="1985-04-18-7" data-id="birthday" placeholder="请选择您的出生日期" readonly value="">
                        <input type="hidden" id="birthday" name="birthday"  value="" >
                    </div>
                </li>
                <li>
                    <div class="frm_left f_left">手机号码</div>
                    <div class="frm_auto"><input type="text" name="phone" value="<!--{$arrdata['phone']}-->"  placeholder="请输入您的手机号码"/></div>
                </li>
            </ul>
            <div class="pg_btn">
                <a href="javascript:;" id="xie_btn">确认信息</a>
            </div>
        </form>
    </section>
    <script src="__PUBLIC__/js/YD_calendar.min.js"></script>
    <script src="__PUBLIC__/js/layer_mobile/layer.js"></script>
    <script>
        const Oman = document.getElementById('man');
        const Owoman = document.getElementById('woman');
        const OJs_sex = document.getElementById('Js_sex');
        const Oxie_btn = document.getElementById('xie_btn');
        const OuserName = document.getElementsByName('username')[0];
        const OplaceBirth = document.getElementsByName('PlaceBirth')[0];
        const Obirthday = document.getElementById('datetime');
        const Ophone = document.getElementsByName('phone')[0];

        // 男女切换
        Oman.onclick = function(){
            Owoman.firstElementChild.classList.remove("sex")
            Oman.firstElementChild.classList.add("sex")
            OJs_sex.value = "1";
        }
        Owoman.onclick = function(){
            Oman.firstElementChild.classList.remove("sex")
            Owoman.firstElementChild.classList.add("sex")
            OJs_sex.value = '0';
        }
        // 时间日期
        var calendar1 = new lCalendar().init('#datetime');
         // 表单验证
         Oxie_btn.onclick = function(){
            const patrn= /[\u4E00-\u9FA5]|[\uFE30-\uFFA0]/gi;
            const phoneYz= /^[1][3,4,5,7,8][0-9]{9}$/;
            var isEnd = false;
            if(OuserName.value == ''){
                layer.open({
                    content: '请输入您的姓名'
                    ,skin: 'msg'
                    ,time: 2 //2秒后自动关闭
                });
                return false;
            }else if(OuserName.value.length < 2){
                layer.open({
                    content: '姓名字数不能低于2'
                    ,skin: 'msg'
                    ,time: 2 //2秒后自动关闭
                });
                return false;
            }else if(!patrn.test(OuserName.value)){
                layer.open({
                    content: '请输入中文姓名'
                    ,skin: 'msg'
                    ,time: 2 //2秒后自动关闭
                });
                return false;
            };
            if(Obirthday.value == ''){
                layer.open({
                    content: '请选择您的出生日期'
                    ,skin: 'msg'
                    ,time: 2 //2秒后自动关闭
                });
                return false;
            };
            if(document.querySelector('#birthday').value == ''){
                Obirthday.value = '';
                layer.open({
                    content: '请重新选择您的出生日期'
                    ,skin: 'msg'
                    ,time: 2 //2秒后自动关闭
                });
                return false;
            };
            if(Ophone.value == ''){
                layer.open({
                    content: '手机号码不能为空！'
                    ,skin: 'msg'
                    ,time: 2 //2秒后自动关闭
                });
                return false;
            }else if(!phoneYz.test(Ophone.value)){
                layer.open({
                    content: '号码有误，请重新输入！'
                    ,skin: 'msg'
                    ,time: 2 //2秒后自动关闭
                });
                return false;
            };

            setTimeout(function() {
                layer.open({
                    type: 2
                    ,content: '运势分析中'
                });
                setTimeout(function(){
                    layer.closeAll('loading');
                    document.querySelector('#xie_frm').submit();
                },1200)
            },100);
        }
    </script>
</body>
</html>